import React, { useEffect, Fragment, useState } from 'react';
import Modal from '../../../UIComponent/Modal.jsx';
import ListCell from '../../../UIComponent/ListCell.jsx';
import PickerView from '../../../UIComponent/PickerView';
import '../../../UIComponent/PickerView.css';
import { updateRule, fetchRuleList } from '../api';
import PropTypes from 'prop-types';
import styles from './ClockModal.scss';

const validity = [
    {
        label: '5分钟内',
        value: 5,
    },
    {
        label: '30分钟内',
        value: 30,
    },
    {
        label: '60分钟内',
        value: 60,
    },
    {
        label: '120分钟内',
        value: 120,
    },
];
const hours = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18].map(h => ({ label: h < 10 ? `0${h}` : h, value: String(h) }));
const minutes = ['00', '10', '20', '30', '40', '50'].map(m => ({ label: m, value: m }));
const time = [
    hours,
    minutes
]; // 时间点数据源

ClockModal.propTypes = {
    visible: PropTypes.bool,
    onOk: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired
};
export default function ClockModal(props) {
    const [clockVisible, setClockVisible] = useState(false); // 设置打卡天数
    const [validityVisible, setValidityVisible] = useState(false); // 设置有效期
    const [timeVisible, setTimeVisible] = useState(false); // 设置时间点
    const [ruleList, setRuleList] = useState([]);
    const [valid, setValid] = useState(5);
    const [timePickerIndex, setTimerPickerIndex] = useState(undefined); // 目前操作的时间点
    const [timeValue, setTimeValue] = useState([8, '00']); // 时间点
    useEffect(() => {
        fetchRuleList().then(result => {
            setRuleList(result.data);
        });
    }, []);
    useEffect(() => {
        setClockVisible(props.visible);
    }, [props.visible]);
    function onSetClock() {
        updateRule({ valid: ruleList[0].rule.valid, clock: ruleList[0].rule.clock.join(',') }).then(res => {
            props.onOk();
        });
    }
    function onAddTime() {
        const _ruleList = _.cloneDeep(ruleList);
        _.update(_ruleList, [0, 'rule', 'clock'], (rule) => {
            return [...rule, '08:00'];
        });
        setRuleList(_ruleList);
    }
    // 滚动时间点
    function onScrollTime(e) {
        setTimeValue(e);
    }
    // 滚动有效期
    function onScrollValidity(e) {
        setValid(e[0]);
    }
    function onSetVailDitiy() {
        const _ruleList = _.cloneDeep(ruleList);
        _.set(_ruleList, [0, 'rule', 'valid'], valid);
        setRuleList(_ruleList);
        setValidityVisible(false);
    }
    function onSetTime() {
        const _ruleList = _.cloneDeep(ruleList);
        _.set(_ruleList, [0, 'rule', 'clock', timePickerIndex], timeValue.join(':'));
        setRuleList(_ruleList);
        onCancelTimePicker();
    }
    // 显示时间
    function onShowTimePicker(index) {
        setTimeVisible(true);
        setTimerPickerIndex(index);
        setTimeValue(ruleList[0].rule[index].split(':'));
    }
    function onCancelTimePicker() {
        setTimeVisible(false);
        setTimerPickerIndex(undefined);
        setTimeValue([]);
    }
    // 移除时间
    function onDeleteTime(e, index) {
        e.stopPropagation();
        const clock = _.get(ruleList, [0, 'rule', 'clock']) || [];
        const _ruleList = _.cloneDeep(ruleList);
        _.remove(clock, (it, i) => i === index);
        _.set(_ruleList, [0, 'rule', 'clock'], clock);
        setRuleList(_ruleList);
    }
    return (
        <Fragment>
            {/*打卡天数弹出框*/}
            {clockVisible && <Modal
                title='打卡天数'
                visible={clockVisible}
                onOk={() => onSetClock()}
                onCancel={() => props.onCancel()}
            >
                {ruleList.map(item => (
                    <div key={item.id}>
                        <ListCell label='有效期' footer={`${item.rule.valid}分钟内`} onClick={() => setValidityVisible(true)} />
                        {item.rule.clock.map((rule, index) =>
                            <ListCell
                                label={`时间点${index + 1}`}
                                key={index + 1}
                                isHasArrow
                                onClick={() => onShowTimePicker(index)}
                                footer={<div>
                                    <span>{rule}</span>
                                    <span className={styles.delete} onClick={(e) => onDeleteTime(e, index)}>删除</span>
                                </div>}
                            />
                        )}
                        <div className={`weui-btn ${styles.add_time_btn}`} onClick={() => onAddTime()}>添加时间点</div>
                        <div className={styles.tips}>
                            <div>注：</div>
                            <div>1.人均目标出差天数设置只会影响到出差目标天数数据统计，不会影响真实出差天数</div>
                            <div>2.角色需要在角色管理中进行设置</div>
                        </div>
                    </div>
                ))}
            </Modal>}
            {/*有效期弹出框*/}
            {validityVisible && <Modal
                title='有效期'
                visible={validityVisible}
                onOk={() => onSetVailDitiy()}
                onCancel={() => setValidityVisible(false)}
            >
                <PickerView
                    data={validity}
                    cascade={false}
                    value={[valid]}
                    onScrollChange={(e) => onScrollValidity(e)}
                />
            </Modal>}
            {/*时间点弹出框*/}
            {timeVisible && <Modal
                title='时间点'
                visible={timeVisible}
                onOk={() => onSetTime()}
                onCancel={() => onCancelTimePicker()}>
                <PickerView
                    data={time}
                    cascade={false}
                    value={timeValue}
                    onScrollChange={(e) => onScrollTime(e)}
                />
            </Modal>}
        </Fragment>
    );
}
